<template>
  <div v-if="visible" class="modal-overlay" @click.self="handleClose">
    <div class="modal card">
      <div class="modal-header">
        <div class="header-content">
          <div class="warning-icon" :class="warningType">
            <ExclamationTriangleIcon v-if="warningType === 'warning'" :size="24" />
            <ExclamationCircleIcon v-else-if="warningType === 'danger'" :size="24" />
            <BanIcon v-else :size="24" />
          </div>
          <h3>{{ title }}</h3>
        </div>
        <button class="btn" @click="handleClose">✕</button>
      </div>

      <div class="modal-body">
        <div class="warning-message" :class="warningType">
          <p>{{ warningMessage }}</p>
        </div>

        <!-- 批次信息 -->
        <div class="batch-info">
          <div class="batch-name">{{ batch?.name }}</div>
          <div class="batch-details">
            <span class="batch-brand">{{ batch?.brand }}</span>
            <span class="batch-season">{{ batch?.season }}</span>
            <span class="batch-status" :class="`status-${batch?.status}`">
              {{ getStatusText(batch?.status) }}
            </span>
          </div>
        </div>

        <!-- 危险操作确认输入框 -->
        <div v-if="warningType === 'danger'" class="danger-confirmation">
          <label class="form-label">请输入确认语句：</label>
          <div class="confirmation-input-group">
            <input
              v-model="confirmationText"
              class="input"
              type="text"
              :placeholder="confirmationPlaceholder"
              @input="handleConfirmationInput"
            />
            <div class="confirmation-hint">
              请完整输入：<strong>{{ confirmationPlaceholder }}</strong>
            </div>
          </div>
        </div>

        <!-- 不可删除提示 -->
        <div v-if="warningType === 'forbidden'" class="forbidden-message">
          <p>该批次已完成向量库更新，包含重要的匹配数据，无法删除。</p>
          <p>如需处理，请考虑使用归档功能。</p>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn" @click="handleClose">取消</button>
        <button
          v-if="warningType !== 'forbidden'"
          class="btn"
          :class="confirmButtonClass"
          @click="handleConfirm"
          :disabled="!canConfirm"
        >
          {{ confirmButtonText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref, watch } from 'vue'
import { ExclamationTriangleIcon, ExclamationCircleIcon, BanIcon } from './icons'

export default {
  name: 'DeleteBatchDialog',
  components: {
    ExclamationTriangleIcon,
    ExclamationCircleIcon,
    BanIcon,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    batch: {
      type: Object,
      default: null,
    },
  },
  emits: ['confirm', 'close'],
  setup(props, { emit }) {
    const confirmationText = ref('')
    const confirmationPlaceholder = '我知道这是重要批次数据，我确定删除'

    // 根据批次状态确定警告类型
    const warningType = computed(() => {
      if (!props.batch) return 'warning'

      const status = props.batch.status

      // 向量库更新完成，不可删除
      if (status === 'vector_completed') {
        return 'forbidden'
      }

      // 导入完成、匹配完成，需要危险确认
      if (['import_completed', 'matching_completed'].includes(status)) {
        return 'danger'
      }

      // 其他状态，普通警告
      return 'warning'
    })

    // 弹窗标题
    const title = computed(() => {
      switch (warningType.value) {
        case 'forbidden':
          return '无法删除'
        case 'danger':
          return '危险操作确认'
        default:
          return '删除确认'
      }
    })

    // 警告消息
    const warningMessage = computed(() => {
      if (!props.batch) return ''

      const status = props.batch.status

      switch (status) {
        case 'new':
          return '确定要删除这个新建的批次吗？'
        case 'importing':
          return '确定要删除正在导入中的批次吗？导入过程将被中断。'
        case 'import_stopped':
          return '确定要删除已停止导入的批次吗？'
        case 'archived':
          return '确定要删除已归档的批次吗？'
        case 'import_completed':
          return '该批次已完成数据导入，删除将丢失所有导入的数据。'
        case 'matching_completed':
          return '该批次已完成颜色匹配，删除将丢失所有匹配结果和进度。'
        case 'vector_completed':
          return '该批次已完成向量库更新，无法删除。'
        default:
          return '确定要删除这个批次吗？'
      }
    })

    // 确认按钮样式
    const confirmButtonClass = computed(() => {
      switch (warningType.value) {
        case 'danger':
          return 'btn-danger'
        default:
          return 'btn-warning'
      }
    })

    // 确认按钮文本
    const confirmButtonText = computed(() => {
      switch (warningType.value) {
        case 'danger':
          return '确认删除'
        default:
          return '删除'
      }
    })

    // 是否可以确认
    const canConfirm = computed(() => {
      if (warningType.value === 'forbidden') {
        return false
      }

      if (warningType.value === 'danger') {
        return confirmationText.value === confirmationPlaceholder
      }

      return true
    })

    // 获取状态文本
    const getStatusText = status => {
      const statusMap = {
        new: '新建',
        importing: '导入中',
        import_completed: '导入完成',
        matching_completed: '匹配完成',
        vector_completed: '向量完成',
        archived: '已归档',
        import_stopped: '导入停止',
      }
      return statusMap[status] || status
    }

    // 处理确认输入
    const handleConfirmationInput = () => {
      // 可以在这里添加实时验证逻辑
    }

    // 处理确认
    const handleConfirm = () => {
      if (canConfirm.value) {
        emit('confirm', props.batch.id)
      }
    }

    // 处理关闭
    const handleClose = () => {
      confirmationText.value = ''
      emit('close')
    }

    // 监听弹窗显示状态，重置输入
    watch(
      () => props.visible,
      newVal => {
        if (!newVal) {
          confirmationText.value = ''
        }
      }
    )

    return {
      confirmationText,
      confirmationPlaceholder,
      warningType,
      title,
      warningMessage,
      confirmButtonClass,
      confirmButtonText,
      canConfirm,
      getStatusText,
      handleConfirmationInput,
      handleConfirm,
      handleClose,
    }
  },
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.warning-icon.warning {
  background: #fff7e6;
  color: #faad14;
}

.warning-icon.danger {
  background: #fff2f0;
  color: #ff4d4f;
}

.warning-icon.forbidden {
  background: #f5f5f5;
  color: #8c8c8c;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-body {
  padding: 20px;
}

.warning-message {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.warning-message.warning {
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #d46b08;
}

.warning-message.danger {
  background: #fff2f0;
  border: 1px solid #ffccc7;
  color: #cf1322;
}

.warning-message.forbidden {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #595959;
}

.warning-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.batch-info {
  background: #f8f9fa;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.batch-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.batch-details {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-brand,
.batch-season {
  padding: 2px 6px;
  background: var(--primary-color);
  color: white;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.batch-status {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.status-new {
  background: #d9d9d9;
  color: #595959;
}

.status-importing {
  background: #1890ff;
  color: white;
}

.status-import_completed {
  background: #faad14;
  color: white;
}

.status-matching_completed {
  background: #52c41a;
  color: white;
}

.status-vector_completed {
  background: #722ed1;
  color: white;
}

.status-archived {
  background: #8c8c8c;
  color: white;
}

.status-import_stopped {
  background: #ff4d4f;
  color: white;
}

.danger-confirmation {
  margin-top: 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 8px;
}

.confirmation-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confirmation-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.forbidden-message {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 12px;
  margin-top: 16px;
}

.forbidden-message p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #595959;
}

.forbidden-message p:last-child {
  margin-bottom: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

.btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: white;
  color: var(--text-color);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn:hover:not(:disabled) {
  border-color: var(--primary-color);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-warning {
  background: #faad14;
  border-color: #faad14;
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: #d48806;
  border-color: #d48806;
}

.btn-danger {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #cf1322;
  border-color: #cf1322;
}

.input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.input:focus {
  outline: none;
  border-color: var(--primary-color);
}
</style>
